<template>
    <div class="background">
        <el-container class="container">
            <el-main class="main">
                <div class="left_img"></div>
                <div class="right_form">
                    <el-form show-message
                             size="large"
                             label-position="top"
                             label-width="70px"
                             class="form"
                             :model="login_data"
                             :rules="rules"
                             ref="login_form">
                        <div class="title">
                            <el-avatar :size="70" :src="Logo" />
                            <h2>教师档案管理系统</h2>
                        </div>
                        <el-form-item label="用户名：" prop="user_id">
                            <el-input v-model="login_data.user_id" placeholder="Enter your userName"/>
                        </el-form-item>
                        <el-form-item label="密码：" prop="user_password">
                            <el-input
                                v-model="login_data.user_password"
                                type="password"
                                placeholder="Enter your Password"
                                show-password
                            />
                        </el-form-item>
                        <el-form-item style="margin-top: 40px">
                            <el-button type="primary" :loading="isLoading" @click="submit('login_data')" style="width: 100%">Log In</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import Logo from '@/assets/Logo.jpg'
import {ElMessage} from "element-plus";
import useStore from "@/store/store";

const store = useStore()

export default {
    name: "Login",
    data(){
        return {
            Logo,
            isLoading: false,
            login_data: {
                user_id: null,
                user_password: null
            },
            // 表单验证
            rules: {
                user_id: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                user_password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        submit() {
            this.$refs.login_form.validate(validate => {
                if (!validate) return false
                this.login()
            })
        },
        login() {
            this.isLoading = true
            this.login_data.type = "1001"
            this.$api.Login(this.login_data).then(
                response => {
                    if (response.data.user_id !== ''){
                        ElMessage.success('登录成功！')
                        store.user_id = response.data.user_id
                        store.user_name = response.data.user_name
                        this.$router.push('/user_info')
                    } else {
                        ElMessage.error('用户名或密码错误！')
                        this.isLoading = false
                    }
                },
                error => {
                    console.log(error)
                    ElMessage.error(`登录失败！${error.code}----${error.message}`)
                    this.isLoading = false
                }
            )
        }
    }
}
</script>

<style scoped>
    .background {
        position: absolute;
        height: 100%;
        width: 100%;
        /*background-image:url("https://w.wallhaven.cc/full/zy/wallhaven-zyg2lj.png");*/
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        float: left;
    }
    .title {
        display: flex;
        margin: 20px 0;
    }
    .title h2 {
        margin-left: 20px;
        line-height: 70px;
    }
    .main {
        display: flex;
        margin: auto;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1280px;
        height: 720px;
        padding: 0;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--el-box-shadow-dark);
    }
    .left_img {
        width: 640px;
        height: 720px;
        background-image: url("@/assets/login/login_bg.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 1;
    }
    .right_form {
        width: 640px;
        height: 720px;
        z-index: 1;
    }
    .main:after {
        content: "";
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        background: rgba(255, 255, 255);
        z-index: 0;
    }
    .right_form form {
        margin: 170px 100px 0 100px;
    }
</style>